<template>
  <Tree @click-item="handleClickItem" :tree-options="dropdownData" :is-accordion="true" />
</template>

<script setup lang="ts">
import { TreeOption } from '@/components/Tree.vue'

const handleClickItem = (item: TreeOption) => {
  console.log(item.key, item.label)
}

const dropdownData = ref<Array<TreeOption>>([
  {
    key: 1,
    label: '选项1',
    children: [
      {
        key: 7,
        label: '选项2',
        children: [
          { key: 13, label: '选项3' },
          { key: 14, label: '选项3' },
          { key: 15, label: '选项3' }
        ]
      },
      { key: 8, label: '选项2' },
      {
        key: 9,
        label: '选项2',
        children: [
          { key: 16, label: '选项3' },
          { key: 17, label: '选项3' },
          { key: 18, label: '选项3' }
        ]
      }
    ]
  },
  {
    key: 2,
    label: '选项2',
    children: [
      { key: 10, label: '选项2' },
      { key: 11, label: '选项2' },
      {
        key: 12,
        label: '选项2',
        children: [
          {
            key: 19,
            label: '选项3',
            children: [
              { key: 20, label: '选项4' },
              { key: 21, label: '选项4' }
            ]
          },
          { key: 28, label: '选项3' }
        ]
      }
    ]
  },
  { key: 3, label: '选项3' },
  { key: 4, label: '选项4' },
  { key: 5, label: '选项5' },
  {
    key: 6,
    label: '选项6',
    children: [
      { key: 22, label: '选项2' },
      { key: 23, label: '选项2' },
      { key: 24, label: '选项2' },
      { key: 25, label: '选项2' },
      { key: 26, label: '选项2' },
      { key: 27, label: '选项2' }
    ]
  }
])
</script>

<style scoped lang="scss"></style>
